import { Upload, message, Button, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { baseURL } from 'utils/request';
import { getToken } from 'utils/storage';
import { useState } from 'react';


export default function Test() {
    const [images, setImages] = useState([{
        uid: '-1',
        name: 'image.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },])
    const props = {
        fileList: images,
        accept: '.png,.jpg,.jpeg',
        name: 'image',
        action: baseURL + '/upload',
        headers: {
            authorization: 'Bearer ' + getToken(),
        },
        onChange({ file, fileList }) {
            console.log({ file, fileList }, 24);
            setImages(fileList)
            if (file.status === 'done') {
                message.success(`${file.name} 上传成功`);
            } else if (file.status === 'error') {
                message.error(`${file.name} 上传失败`);
            }
        },
        // 上传前,可以鉴定上传的图片类型
        beforeUpload: file => {
            const isType = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type)
            if (!isType) {
                message.error(`${file.name} is not a png file`);
            }
            return isType ? true : Upload.LIST_IGNORE;
        },
        // 点击预览图片
        onPreview: file => {
            setPreviewImage(file.thumbUrl)
        }
    };
    const [previewImage, setPreviewImage] = useState('')
    return (
        <div>
            <Upload {...props} listType='picture-card' >
                <PlusOutlined />
            </Upload>,
            {/* 预览图片弹出框 */}
            <Modal
                visible={previewImage !== ''}
                title={'预览图片'}
                footer={null}
                onCancel={() => setPreviewImage('')}
            >
                <img alt="example" style={{ width: '100%' }} src={previewImage} />
            </Modal>
        </div>
    )
}
